<!doctype html>
<html>
<head>
    <title>JS Tester</title>
</head>
<body> 
    <div class="output"></div> 
    <script>        
        const output = document.querySelector(".output");
        output.textContent = "hello world";
        output.style.height = "200px";
        output.style.width = "400px";
        output.style.backgroundColor = "red";
        output.addEventListener("mousedown", function (e) {
            message("green", e);
        })
        output.addEventListener("mouseover", function (e) {
            message("red", e);
        })
        output.addEventListener("mouseout", function (e) {
            message("yellow", e);
        })
        output.addEventListener("mouseup", function (e) {
            message("blue", e);
        })
        function message(elColor, event) {
            console.log(event.type);
            output.style.backgroundColor = elColor;
        }
    </script>
</body>
</html>
